<template>
  <!-- 审核签署合同弹窗 -->
    <el-dialog :visible.sync="dialogVisible"
               :show-close="false"
               :destroy-on-close="true"
               width="70%">
      <!-- 布局容器 -->
  <div class="BankSeal">
    <el-scrollbar class="myscroller">
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div class="head">
            <div class="left">
              <span class="blue"></span>
              <span class="pending">银行点子盖章</span>
            </div>
            <div class="right">
              <i class="el-icon-circle-close"
                 @click="close()"></i>
            </div>
          </div>
        </el-header>
        <!-- 左边文件 -->
        <el-container class="container">
          <el-aside>
            <div class="file">
              <i class="iconfont icon-waring"></i>
              拖拽图标到右边文件签署位置即可
            </div>
            <div class="contract">
              <i class="iconfont icon-dingzi"></i>
              添加我的单位印章 <br />
            </div>
          </el-aside>
          <!-- 右边文件信息 -->
          <el-main>
            <p>贷款服务合同</p>
            <div ref="imageWrapper">
              <img src="../../../assets/image/hetong.png"
                 alt="" />
              <div class="name" @mousedown="start($event)" @mouseup='end($event)'>
                <img src="../../../assets/image/zhang.png" alt="">
              </div>
            </div>
          </el-main>
        </el-container>
        <el-footer>
          <el-button type="primary" @click="sumbit">提交</el-button>
          <el-button @click="$router.back()">返回</el-button>
        </el-footer>
      </el-container>
      </el-scrollbar>
  </div>
    </el-dialog>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
  data () {
    return {
      dialogVisible: false,
      Url: ''
    }
  },
  methods: {
    close () {
      this.dialogVisible = false
    },
    start (event) {
      const _target = event.currentTarget
      const startx = event.clientX
      const starty = event.clientY
      const sbbkx = startx - event.currentTarget.offsetLeft
      const sbbky = starty - event.currentTarget.offsetTop
      const ww = document.documentElement.clientWidth
      const wh = window.innerHeight
      if (event.preventDefault) {
        event.preventDefault()
      } else {
        event.returnValue = false
      }
      document.onmousemove = function (ev) {
        const event = ev || window.event
        // const scrolltop = document.documentElement.scrollTop || document.body.scrollTop
        if (event.clientY < 0 || event.clientX < 0 || event.clientY > wh || event.clientX > ww) {
          return false
        }
        const endx = event.clientX - sbbkx
        const endy = event.clientY - sbbky
        _target.style.left = endx + 'px'
        _target.style.top = endy + 'px'
      }
    },
    end (e) {
      document.onmousemove = null
    },
    sumbit () {
      const x = document.querySelector('.myscroller')
      html2canvas(this.$refs.imageWrapper, {
        width: this.$refs.imageWrapper.scrollWidth,
        height: this.$refs.imageWrapper.scrollHeight,
        scrollY: -x.scrollTop,
        scrollX: -x.scrollLeft
      }).then(canvas => {
        const dataURL = canvas.toDataURL('image/png')
        this.Url = dataURL
      })
      this.dialogVisible = false
    }
  }
}
</script>
<style scoped lang="less">
.myscroller {
  height: 100%;
}
.BankSeal {
  // height: 600px;
  background: #f5f5f5;
  overflow: hidden;
  .head {
    display: flex;
    padding: 15px 0 0 0;
    height: 62px;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 700;
    .left {
      flex: 1;
      font-weight: 700;
      .blue {
        width: 20px;
        line-height: 20px;
        background-color: rgba(82, 144, 255, 1);
        text-align: center;
        margin-left: 15px;
        margin-top: 20px;
        border-left: 4px solid rgba(82, 144, 255, 1);
      }
      .pending {
        width: 54px;
        color: rgba(16, 16, 16, 1);
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        margin-left: 13px;
        font-family: SourceHanSansSC-bold;
      }
    }
    .right {
      flex: 1;
      text-align: right;
      font-size: 30px;
      color: #626262;
      width: 35px;
      height: 35px;
    }
  }
  .el-aside {
    border: 1px solid #c7c7c7;
    .iconfont {
      font-size: 20px;
    }
  }
  .el-main {
    border: 1px solid #c7c7c7;
  }
  .container {
    margin: 0 11px 0 12px;
    text-align: center;
  }
  .el-aside {
    line-height: 20px;
    text-align: center;
    background: #ffffff;
    padding: 0 2px;

    /deep/ .file {
      width: 100%;
      height: 44px;
      line-height: 44px;
      border-bottom: 2px solid #c3c3c3;
      font-size: 14px;
      font-weight: 700;
    }
  }
  .contract {
    margin-top: 20px;
    font-weight: 700;
  }
  .el-main {
    padding: 0px;
    margin-left: 14px;
    background: #f5f5f5;
    text-align: center;
    p {
      font-size: 20px;
    }
  }
  .el-footer {
    width: 100%;
    height: 85px;
    line-height: 85px;
    text-align: center;
  }
}
.name{
  position: absolute;
  top: 168px;
  left: 46px;
}
</style>
<style lang="less" scoped>
.element.style {
  width: 374px;
}
/deep/ .el-dialog__header {
  padding: 0;
}
</style>
